﻿<div id="startProjectLayout-page" class="static-content">

    <h3>AjaxStack Project Layout</h3>
    
    <p>
        One of the best things about AjaxStack is that it promotes developing your applications 
        in the spirit of the <a href="http://www.w3.org/">W3C</a> XHTML/CSS semantic web.
    </p>
    
    <p>
        That is, you use standard 
        <ul>
            <li><b class="html">.html</b> files for your website content</li>
            <li><b class="css">.css</b> files for your websites look and feel</li>
            <li>And <b class="js">.js</b> files to add behaviour to your website</li>
        </ul>
    </p>
    
    <p>
        We take this a step further and provide a flexible 
        <acronym title="Object Orientated Programming">OOP</acronym> JavaScript framework so you 
        can develop your application in the same paradigm that you have with other mainstream languages 
        like C# and Java.<br />

        We also include all the base JavaScript classes you need to develop your application in a 
        rich event-based MVC model.
    </p>
    
    <p>
        Seperating the development and deployment of your application increases its maintainability 
        as you have the freedom to divide your project in as many files or folders you see fit without 
        worrying about external references as you normally would.
    </p>
    
    <p>
        At the same time we take care of optimizing your website in the smallest footprint possible 
        so when you deploy your users will have the fastest and best experience they can.
    </p>
    
    
    <table class="folders">
        <caption>Project Files and Folders</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>css\</td>
                <td>
                    Contains all your website stylesheets. You can have as many 
                    <b class="css">*.css</b> files as you want as it all gets merged together.
                    <span class="note">Note: The files will be ordered from the top-most directory down</span>
                </td>
            </tr>
            <tr>
                <td>html\</td>
                <td>
                    Contains the HTML content for all your pages and components. 
                    Every page is stored in its own seperate file. You use the file name
                    (without the extension) to link to the page in your website. 
                </td>
            </tr>
            <tr>
                <td>img\</td>
                <td>
                    This file is left as-is so you can reference your images as you normally would.
                    <span class="note">
                        Note: As all files are compressed and embedded inside 
                        <b class="html">default.htm</b>, this becomes the relative path you would use 
                        to reference your images from.
                    </span>
                </td>
            </tr>
            <tr>
                <td>js\</td>
                <td>
                    Contains all your applications logic. All files in here are merged together 
                    from the top-level down. The layout doesn't matter though it is a good idea 
                    to keep your ViewControllers seperate from your Contexts, etc.
                </td>
            </tr>
            <tr>
                <td>jsLib\</td>
                <td>
                    Include any dependency to 3rd party JavaScript libraries here so they will be 
                    merged together with your applications JavaScript at deployment time.
                    <span class="note">Note: files ending with <b class="js">.min.js</b> are considered 
                      to be 'minified' so they will be included as-is. 
                      Any other <b class="js">*.js</b> file will be Compressed first.
                    </span>
                </td>
            </tr>
            <tr>
                <td>jsLibOnload\</td>
                <td>
                    Include libraries here that are not needed immediately by your application. 
                    They will start downloading after the first time a page has loaded.
                </td>
            </tr>
            <tr>
                <td>release\</td>
                <td>
                    Where the 'released' version of your application is generated. You would only need to 
                    include these files when you deploy your application.
                </td>
            </tr>
            <tr>
                <td>tests\</td>
                <td>
                    Where your JavaScript unit tests are stored. We have preconfigured it so that all test 
                    stored in the <b class="dir">tests\src\</b> folder are automatically run when you 
                    load the <b class="html">tests\default.htm</b> page.
                </td>
            </tr>
            <tr>
                <td>debug.htm</td>
                <td>
                    Use this page while developing as every refresh will re-generate your entire website so 
                    you can view your changes in real-time. The JavaScript libraries are also left 
                    'UnCompressed' to make debugging easier.
                </td>
            </tr>
            <tr>
                <td>default.htm</td>
                <td>
                    This is the 'release' version of your application, it will only reference the 
                    statically generated files so you do not need to have .NET installed on your server 
                    when you deploy your application.
                </td>
            </tr>
        </tbody>
    </table>       

    <div class="page-links">
        <span class="nav-link prev" href="#start">Getting Started</span>
    </div>    

</div>